﻿/*
 * iviewer Widget for jQuery UI
 * https://github.com/can3p/iviewer
 *
 * Copyright (c) 2009 - 2013 Dmitry Petrov
 * Dual licensed under the MIT license.
 *  - http://www.opensource.org/licenses/mit-license.php
 *
 * Author: Dmitry Petrov
 * Version: 0.7.11
 */

(function ($, undefined) {

    //this code was taken from the https://github.com/furf/jquery-ui-touch-punch
    var mouseEvents = {
        touchstart: 'mousedown',
        touchmove: 'mousemove',
        touchend: 'mouseup'
    },
        gesturesSupport = 'ongesturestart' in document.createElement('div');


    /**
     * Convert a touch event to a mouse-like
     */
    function makeMouseEvent(event) {
        var touch = event.originalEvent.changedTouches[0];

        return $.extend(event, {
            type: mouseEvents[event.type],
            which: 1,
            pageX: touch.pageX,
            pageY: touch.pageY,
            screenX: touch.screenX,
            screenY: touch.screenY,
            clientX: touch.clientX,
            clientY: touch.clientY,
            isTouchEvent: true
        });
    }

    var mouseProto = $.ui.mouse.prototype,
        _mouseInit = $.ui.mouse.prototype._mouseInit;

    mouseProto._mouseInit = function () {
        var self = this;
        self._touchActive = false;

        this.element.bind('touchstart.' + this.widgetName, function (event) {
            if (gesturesSupport && event.originalEvent.touches.length > 1) { return; }
            self._touchActive = true;
            return self._mouseDown(makeMouseEvent(event));
        });

        // these delegates are required to keep context
        this._mouseMoveDelegate = function (event) {
            if (gesturesSupport && event.originalEvent.touches && event.originalEvent.touches.length > 1) { return; }
            if (self._touchActive) {
                return self._mouseMove(makeMouseEvent(event));
            }
        };
        this._mouseUpDelegate = function (event) {
            if (self._touchActive) {
                self._touchActive = false;
                return self._mouseUp(makeMouseEvent(event));
            }
        };

        $(document)
            .bind('touchmove.' + this.widgetName, this._mouseMoveDelegate)
            .bind('touchend.' + this.widgetName, this._mouseUpDelegate);

        _mouseInit.apply(this);
    };

    /**
     * Simple implementation of jQuery like getters/setters
     * var val = something();
     * something(val);
     */
    var setter = function (setter, getter) {
        return function (val) {
            if (arguments.length === 0) {
                return getter.apply(this);
            } else {
                setter.apply(this, arguments);
            }
        }
    };

    /**
     * Internet explorer rotates image relative left top corner, so we should
     * shift image when it's rotated.
     */
    var ieTransforms = {
        '0': {
            marginLeft: 0,
            marginTop: 0,
            filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod="auto expand")'
        },

        '90': {
            marginLeft: -1,
            marginTop: 1,
            filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=-1, M21=1, M22=0, SizingMethod="auto expand")'
        },

        '180': {
            marginLeft: 0,
            marginTop: 0,
            filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, SizingMethod="auto expand")'
        },

        '270': {
            marginLeft: -1,
            marginTop: 1,
            filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod="auto expand")'
        }
    },
        // this test is the inversion of the css filters test from the modernizr project
        useIeTransforms = function () {
            var modElem = document.createElement('modernizr'),
                mStyle = modElem.style,
                omPrefixes = 'Webkit Moz O ms',
                domPrefixes = omPrefixes.toLowerCase().split(' '),
                props = ("transform" + ' ' + domPrefixes.join("Transform ") + "Transform").split(' ');
            /*using 'for' loop instead of 'for in' to avoid issues in IE8*/
            for (var i = 0; i < props.length; i++) {
                var prop = props[i];
                if (prop.indexOf("-") == -1 && mStyle[prop] !== undefined) {
                    return false;
                }
            }
            return true;
        }();

    $.widget("ui.iviewer", $.ui.mouse, {
        widgetEventPrefix: "iviewer",
        options: {
            /**
            * start zoom value for image, not used now
            * may be equal to "fit" to fit image into container or scale in %
            **/
            zoom: "fit",
            /**
            * base value to scale image
            **/
            zoom_base: 100,
            /**
            * maximum zoom
            **/
            zoom_max: 300,
            /**
            * minimum zoom
            **/
            zoom_min: 5,
            /**
            * base of rate multiplier.
            * zoom is calculated by formula: zoom_base * zoom_delta^rate
            **/
            zoom_delta: 1.2,
            /**
            * whether the zoom should be animated.
            */
            zoom_animation: true,
            /**
            * if true plugin doesn't add its own controls
            **/
            ui_disabled: false,
            /**
             * If false mousewheel will be disabled
             */
            mousewheel: true,
            /**
            * if false, plugin doesn't bind resize event on window and this must
            * be handled manually
            **/
            update_on_resize: true,
            /**
            * whether to provide zoom on doubleclick functionality
            */
            zoom_on_dblclick: true,
            /**
            * if true the image will fill the container and the image will be distorted
            */
            fill_container: false,
            /**
            * event is triggered when zoom value is changed
            * @param int new zoom value
            * @return boolean if false zoom action is aborted
            **/
            onZoom: jQuery.noop,
            /**
            * event is triggered when zoom value is changed after image is set to the new dimensions
            * @param int new zoom value
            * @return boolean if false zoom action is aborted
            **/
            onAfterZoom: jQuery.noop,
            /**
            * event is fired on drag begin
            * @param object coords mouse coordinates on the image
            * @return boolean if false is returned, drag action is aborted
            **/
            onStartDrag: jQuery.noop,
            /**
            * event is fired on drag action
            * @param object coords mouse coordinates on the image
            **/
            onDrag: jQuery.noop,
            /**
            * event is fired on drag stop
            * @param object coords mouse coordinates on the image
            **/
            onStopDrag: jQuery.noop,
            /**
            * event is fired when mouse moves over image
            * @param object coords mouse coordinates on the image
            **/
            onMouseMove: jQuery.noop,
            /**
            * mouse click event
            * @param object coords mouse coordinates on the image
            **/
            onClick: jQuery.noop,
            /**
            * mouse double click event. If used will delay each click event.
            * If double click event was fired, clicks will not.
            *
            * @param object coords mouse coordinates on the image
            **/
            onDblClick: null,
            /**
            * event is fired when image starts to load
            */
            onStartLoad: null,
            /**
            * event is fired, when image is loaded and initially positioned
            */
            onFinishLoad: null,
            /**
            * event is fired when image load error occurs
            */
            onErrorLoad: null
        },

        _create: function () {
            var me = this;

            //drag variables
            this.dx = 0;
            this.dy = 0;

            /* object containing actual information about image
            *   @img_object.object - jquery img object
            *   @img_object.orig_{width|height} - original dimensions
            *   @img_object.display_{width|height} - actual dimensions
            */
            this.img_object = {};

            this.zoom_object = {}; //object to show zoom status

            this._angle = 0;

            this.current_zoom = this.options.zoom;

            if (this.options.src === null) {
                return;
            }

            this.container = this.element;

            this._updateContainerInfo();

            //init container
            this.container.css("overflow", "hidden");

            if (this.options.update_on_resize == true) {
                $(window).resize(function () {
                    me.update();
                });
            }

            this.img_object = new $.ui.iviewer.ImageObject(this.options.zoom_animation);

            if (this.options.mousewheel) {
                this.activateMouseWheel(this.options.mousewheel);
            }

            //bind doubleclick only if callback is not falsy
            var useDblClick = !!this.options.onDblClick || this.options.zoom_on_dblclick,
                dblClickTimer = null,
                clicksNumber = 0;

            //init object
            this.img_object.object()
                .prependTo(this.container);

            //all these tricks are needed to fire either click
            //or doubleclick events at the same time
            if (useDblClick) {
                this.img_object.object()
                    //bind mouse events
                    .click(function (e) {
                        clicksNumber++;
                        clearTimeout(dblClickTimer);

                        dblClickTimer = setTimeout(function () {
                            clicksNumber = 0;
                            me._click(e);
                        }, 300);
                    })
                    .dblclick(function (e) {
                        if (clicksNumber !== 2) return;

                        clearTimeout(dblClickTimer);
                        clicksNumber = 0;
                        me._dblclick(e);
                    });
            } else {
                this.img_object.object()
                    .click(function (e) { me._click(e); });
            }

            this.container.bind('mousemove.iviewer', function (ev) { me._handleMouseMove(ev); });

            this.loadImage(this.options.src);

            if (!this.options.ui_disabled) {
                this.createui();
            }
            this.controls = this.container.find('.iviewer_common') || {};
            this._mouseInit();
        },

        destroy: function () {
            $.Widget.prototype.destroy.call(this);
            this._mouseDestroy();
            this.img_object.object().remove();
            /*removing the controls on destroy*/
            this.controls.remove();
            this.container.off('.iviewer');
            this.container.css('overflow', ''); //cleanup styles on destroy
        },

        _updateContainerInfo: function () {
            this.options.height = this.container.height();
            this.options.width = this.container.width();
        },

        /**
         * Add or remove the mousewheel effect on the viewer
         * @param {boolean} isActive
         * Sample : $('#viewer').iviewer('activateMouseWheel', true);
         */
        activateMouseWheel: function (isActive) {
            // Remove all the previous event bind on the mousewheel
            this.container.unbind('mousewheel.iviewer');
            if (gesturesSupport) {
                this.img_object.object().unbind('touchstart').unbind('gesturechange.iviewer').unbind('gestureend.iviewer');
            }

            if (isActive) {
                var me = this;

                this.container.bind('mousewheel.iviewer', function (ev, delta) {
                    //this event is there instead of containing div, because
                    //at opera it triggers many times on div
                    var zoom = (delta > 0) ? 1 : -1,
                        container_offset = me.container.offset(),
                        mouse_pos = {
                            //jquery.mousewheel 3.1.0 uses strange MozMousePixelScroll event
                            //which is not being fixed by jQuery.Event
                            x: (ev.pageX || ev.originalEvent.pageX) - container_offset.left,
                            y: (ev.pageY || ev.originalEvent.pageX) - container_offset.top
                        };
                    me.zoom_by(zoom, mouse_pos);
                    return false;
                });

                if (gesturesSupport) {
                    var gestureThrottle = +new Date();
                    var originalScale, originalCenter;
                    this.img_object.object()
                        .bind('touchstart', function (ev) {
                            originalScale = me.current_zoom;
                            var touches = ev.originalEvent.touches,
                                container_offset;
                            if (touches.length == 2) {
                                container_offset = me.container.offset();
                                originalCenter = {
                                    x: (touches[0].pageX + touches[1].pageX) / 2 - container_offset.left,
                                    y: (touches[0].pageY + touches[1].pageY) / 2 - container_offset.top
                                };
                            } else {
                                originalCenter = null;
                            }
                        }).bind('gesturechange.iviewer', function (ev) {
                            //do not want to import throttle function from underscore
                            var d = +new Date();
                            if ((d - gestureThrottle) < 50) { return; }
                            gestureThrottle = d;
                            var zoom = originalScale * ev.originalEvent.scale;
                            me.set_zoom(zoom, originalCenter);
                            ev.preventDefault();
                        }).bind('gestureend.iviewer', function (ev) {
                            originalCenter = null;
                        });
                }
            }
        },

        update: function () {
            this._updateContainerInfo();
            this.setCoords(this.img_object.x(), this.img_object.y());
        },

        loadImage: function (src) {
            this.current_zoom = this.options.zoom;
            var me = this;

            this._trigger('onStartLoad', 0, src);

            this.container.addClass("iviewer_loading");
            this.img_object.load(src, function () {
                me._fill_orig_dimensions = { width: me.img_object.orig_width(), height: me.img_object.orig_height() };
                me._imageLoaded(src);
            }, function () {
                me._trigger("onErrorLoad", 0, src);
            });
        },

        _imageLoaded: function (src) {
            this.container.removeClass("iviewer_loading");
            this.container.addClass("iviewer_cursor");

            if (this.options.zoom == "fit") {
                this.fit(true);
            }
            else {
                this.set_zoom(this.options.zoom, true);
            }

            this._trigger('onFinishLoad', 0, src);

            if (this.options.fill_container) {
                this.fill_container(true);
            }
        },

        /**
        * fits image in the container
        *
        * @param {boolean} skip_animation
        **/
        fit: function (skip_animation) {
            var aspect_ratio = this.img_object.orig_width() / this.img_object.orig_height();
            var window_ratio = this.options.width / this.options.height;
            var choose_left = (aspect_ratio > window_ratio);
            var new_zoom = 0;

            if (choose_left) {
                new_zoom = this.options.width / this.img_object.orig_width() * 100;
            }
            else {
                new_zoom = this.options.height / this.img_object.orig_height() * 100;
            }

            this.set_zoom(new_zoom, skip_animation);
        },

        /**
        * center image in container
        **/
        center: function () {
            this.setCoords(-Math.round((this.img_object.display_width() - this.options.width) / 2),
                    -Math.round((this.img_object.display_height() - this.options.height) / 2));
        },

        /**
        *   move a point in container to the center of display area
        *   @param x a point in container
        *   @param y a point in container
        **/
        moveTo: function (x, y) {
            var dx = x - Math.round(this.options.width / 2);
            var dy = y - Math.round(this.options.height / 2);

            var new_x = this.img_object.x() - dx;
            var new_y = this.img_object.y() - dy;

            this.setCoords(new_x, new_y);
        },

        /**
         * Get container offset object.
         */
        getContainerOffset: function () {
            return jQuery.extend({}, this.container.offset());
        },

        /**
        * set coordinates of upper left corner of image object
        **/
        setCoords: function (x, y) {
            //do nothing while image is being loaded
            if (!this.img_object.loaded()) { return; }

            var coords = this._correctCoords(x, y);
            this.img_object.x(coords.x);
            this.img_object.y(coords.y);
        },

        _correctCoords: function (x, y) {
            x = parseInt(x, 10);
            y = parseInt(y, 10);

            //check new coordinates to be correct (to be in rect)
            if (y > 0) {
                y = 0;
            }
            if (x > 0) {
                x = 0;
            }
            if (y + this.img_object.display_height() < this.options.height) {
                y = this.options.height - this.img_object.display_height();
            }
            if (x + this.img_object.display_width() < this.options.width) {
                x = this.options.width - this.img_object.display_width();
            }
            if (this.img_object.display_width() <= this.options.width) {
                x = -(this.img_object.display_width() - this.options.width) / 2;
            }
            if (this.img_object.display_height() <= this.options.height) {
                y = -(this.img_object.display_height() - this.options.height) / 2;
            }

            return { x: x, y: y };
        },


        /**
        * convert coordinates on the container to the coordinates on the image (in original size)
        *
        * @return object with fields x,y according to coordinates or false
        * if initial coords are not inside image
        **/
        containerToImage: function (x, y) {
            var coords = {
                x: x - this.img_object.x(),
                y: y - this.img_object.y()
            };

            coords = this.img_object.toOriginalCoords(coords);

            return {
                x: util.descaleValue(coords.x, this.current_zoom),
                y: util.descaleValue(coords.y, this.current_zoom)
            };
        },

        /**
        * convert coordinates on the image (in original size, and zero angle) to the coordinates on the container
        *
        * @return object with fields x,y according to coordinates
        **/
        imageToContainer: function (x, y) {
            var coords = {
                x: util.scaleValue(x, this.current_zoom),
                y: util.scaleValue(y, this.current_zoom)
            };

            return this.img_object.toRealCoords(coords);
        },

        /**
        * get mouse coordinates on the image
        * @param e - object containing pageX and pageY fields, e.g. mouse event object
        *
        * @return object with fields x,y according to coordinates or false
        * if initial coords are not inside image
        **/
        _getMouseCoords: function (e) {
            var containerOffset = this.container.offset(),
                coords = this.containerToImage(e.pageX - containerOffset.left, e.pageY - containerOffset.top);

            return coords;
        },

        /**
        * fills container entirely by distorting image
        *
        * @param {boolean} fill wether to fill the container entirely or not.
        **/
        fill_container: function (fill) {
            this.options.fill_container = fill;
            if (fill) {
                var ratio = this.options.width / this.options.height;
                if (ratio > 1)
                    this.img_object.orig_width(this.img_object.orig_height() * ratio);
                else
                    this.img_object.orig_height(this.img_object.orig_width() * ratio);
            }
            else {
                this.img_object.orig_width(this._fill_orig_dimensions.width);
                this.img_object.orig_height(this._fill_orig_dimensions.height);
            }
            this.set_zoom(this.current_zoom);
        },

        /**
        * set image scale to the new_zoom
        *
        * @param {number} new_zoom image scale in %
        * @param {boolean} skip_animation
        * @param {x: number, y: number} Coordinates of point the should not be moved on zoom. The default is the center of image.
        **/
        set_zoom: function (new_zoom, skip_animation, zoom_center) {
            if (this._trigger('onZoom', 0, new_zoom) == false) {
                return;
            }

            //do nothing while image is being loaded
            if (!this.img_object.loaded()) { return; }

            zoom_center = zoom_center || {
                x: Math.round(this.options.width / 2),
                y: Math.round(this.options.height / 2)
            };

            if (new_zoom < this.options.zoom_min) {
                new_zoom = this.options.zoom_min;
            }
            else if (new_zoom > this.options.zoom_max) {
                new_zoom = this.options.zoom_max;
            }

            /* we fake these values to make fit zoom properly work */
            var old_x, old_y;
            if (this.current_zoom == "fit") {
                old_x = zoom_center.x + Math.round(this.img_object.orig_width() / 2);
                old_y = zoom_center.y + Math.round(this.img_object.orig_height() / 2);
                this.current_zoom = 100;
            }
            else {
                old_x = -this.img_object.x() + zoom_center.x;
                old_y = -this.img_object.y() + zoom_center.y;
            }

            var new_width = util.scaleValue(this.img_object.orig_width(), new_zoom);
            var new_height = util.scaleValue(this.img_object.orig_height(), new_zoom);
            var new_x = util.scaleValue(util.descaleValue(old_x, this.current_zoom), new_zoom);
            var new_y = util.scaleValue(util.descaleValue(old_y, this.current_zoom), new_zoom);

            new_x = zoom_center.x - new_x;
            new_y = zoom_center.y - new_y;

            new_width = Math.floor(new_width);
            new_height = Math.floor(new_height);
            new_x = Math.floor(new_x);
            new_y = Math.floor(new_y);

            this.img_object.display_width(new_width);
            this.img_object.display_height(new_height);

            var coords = this._correctCoords(new_x, new_y),
                self = this;

            this.img_object.setImageProps(new_width, new_height, coords.x, coords.y,
                                            skip_animation, function () {
                                                self._trigger('onAfterZoom', 0, new_zoom);
                                            });
            this.current_zoom = new_zoom;

            this.update_status();
        },
        /**
         * shows or hides the controls
         * controls are shown/hidden based on user input
         * @param Boolean flag that specifies whether to show or hide the controls
         **/
        showControls: function (flag) {
            if (flag) {
                this.controls.fadeIn();
            } else {
                this.controls.fadeOut();
            }
        },
        /**
        * changes zoom scale by delta
        * zoom is calculated by formula: zoom_base * zoom_delta^rate
        * @param Integer delta number to add to the current multiplier rate number
        * @param {x: number, y: number=} Coordinates of point the should not be moved on zoom.
        **/
        zoom_by: function (delta, zoom_center) {
            var closest_rate = this.find_closest_zoom_rate(this.current_zoom);

            var next_rate = closest_rate + delta;
            var next_zoom = this.options.zoom_base * Math.pow(this.options.zoom_delta, next_rate);
            if (delta > 0 && next_zoom < this.current_zoom) {
                next_zoom *= this.options.zoom_delta;
            }

            if (delta < 0 && next_zoom > this.current_zoom) {
                next_zoom /= this.options.zoom_delta;
            }

            this.set_zoom(next_zoom, undefined, zoom_center);
        },

        /**
        * Rotate image
        * @param {num} deg Degrees amount to rotate. Positive values rotate image clockwise.
        *     Currently 0, 90, 180, 270 and -90, -180, -270 values are supported
        *
        * @param {boolean} abs If the flag is true if, the deg parameter will be considered as
        *     a absolute value and relative otherwise.
        * @return {num|null} Method will return current image angle if called without any arguments.
        **/
        angle: function (deg, abs) {
            if (arguments.length === 0) { return this.img_object.angle(); }

            if (deg < -270 || deg > 270 || deg % 90 !== 0) { return; }
            if (!abs) { deg += this.img_object.angle(); }
            if (deg < 0) { deg += 360; }
            if (deg >= 360) { deg -= 360; }

            if (deg === this.img_object.angle()) { return; }

            this.img_object.angle(deg);
            //the rotate behavior is different in all editors. For now we  just center the
            //image. However, it will be better to try to keep the position.
            this.center();
            this._trigger('angle', 0, { angle: this.img_object.angle() });
        },

        /**
        * finds closest multiplier rate for value
        * basing on zoom_base and zoom_delta values from settings
        * @param Number value zoom value to examine
        **/
        find_closest_zoom_rate: function (value) {
            if (value == this.options.zoom_base) {
                return 0;
            }

            function div(val1, val2) { return val1 / val2; };
            function mul(val1, val2) { return val1 * val2; };

            var func = (value > this.options.zoom_base) ? mul : div;
            var sgn = (value > this.options.zoom_base) ? 1 : -1;

            var mltplr = this.options.zoom_delta;
            var rate = 1;

            while (Math.abs(func(this.options.zoom_base, Math.pow(mltplr, rate)) - value) >
                  Math.abs(func(this.options.zoom_base, Math.pow(mltplr, rate + 1)) - value)) {
                rate++;
            }

            return sgn * rate;
        },

        /* update scale info in the container */
        update_status: function () {
            if (!this.options.ui_disabled) {
                var percent = Math.round(100 * this.img_object.display_height() / this.img_object.orig_height());

                if (percent) {
                    this.zoom_object.html(percent + "%");
                }
                else {
                    this.zoom_object.html("0%");
                }
            }
        },

        /**
         * Get some information about the image.
         *     Currently orig_(width|height), display_(width|height), angle, zoom and src params are supported.
         *
         *  @param {string} parameter to check
         *  @param {boolean} withoutRotation if param is orig_width or orig_height and this flag is set to true,
         *      method will return original image width without considering rotation.
         *
         */
        info: function (param, withoutRotation) {
            if (!param) { return; }

            switch (param) {
                case 'orig_width':
                case 'orig_height':
                    if (withoutRotation) {
                        return (this.img_object.angle() % 180 === 0 ? this.img_object[param]() :
                                param === 'orig_width' ? this.img_object.orig_height() :
                                                            this.img_object.orig_width());
                    } else {
                        return this.img_object[param]();
                    }
                case 'display_width':
                case 'display_height':
                case 'angle':
                    return this.img_object[param]();
                case 'zoom':
                    return this.current_zoom;
                case 'options':
                    return this.options;
                case 'src':
                    return this.img_object.object().attr('src');
                case 'coords':
                    return {
                        x: this.img_object.x(),
                        y: this.img_object.y()
                    };
            }
        },

        /**
        *   callback for handling mousdown event to start dragging image
        **/
        _mouseStart: function (e) {
            $.ui.mouse.prototype._mouseStart.call(this, e);
            if (this._trigger('onStartDrag', 0, this._getMouseCoords(e)) === false) {
                return false;
            }

            /* start drag event*/
            this.container.addClass("iviewer_drag_cursor");

            //#10: fix movement quirks for ipad
            this._dragInitialized = !(e.originalEvent.changedTouches && e.originalEvent.changedTouches.length == 1);

            this.dx = e.pageX - this.img_object.x();
            this.dy = e.pageY - this.img_object.y();
            return true;
        },

        _mouseCapture: function (e) {
            return true;
        },

        /**
         * Handle mouse move if needed. User can avoid using this callback, because
         *    he can get the same information through public methods.
         *  @param {jQuery.Event} e
         */
        _handleMouseMove: function (e) {
            this._trigger('onMouseMove', e, this._getMouseCoords(e));
        },

        /**
        *   callback for handling mousemove event to drag image
        **/
        _mouseDrag: function (e) {
            $.ui.mouse.prototype._mouseDrag.call(this, e);

            //#10: imitate mouseStart, because we can get here without it on iPad for some reason
            if (!this._dragInitialized) {
                this.dx = e.pageX - this.img_object.x();
                this.dy = e.pageY - this.img_object.y();
                this._dragInitialized = true;
            }

            var ltop = e.pageY - this.dy;
            var lleft = e.pageX - this.dx;

            this.setCoords(lleft, ltop);
            this._trigger('onDrag', e, this._getMouseCoords(e));
            return false;
        },

        /**
        *   callback for handling stop drag
        **/
        _mouseStop: function (e) {
            $.ui.mouse.prototype._mouseStop.call(this, e);
            this.container.removeClass("iviewer_drag_cursor");
            this._trigger('onStopDrag', 0, this._getMouseCoords(e));
        },

        _click: function (e) {
            this._trigger('onClick', 0, this._getMouseCoords(e));
        },

        _dblclick: function (ev) {
            if (this.options.onDblClick) {
                this._trigger('onDblClick', 0, this._getMouseCoords(ev));
            }

            if (this.options.zoom_on_dblclick) {
                var container_offset = this.container.offset()
                  , mouse_pos = {
                      x: ev.pageX - container_offset.left,
                      y: ev.pageY - container_offset.top
                  };

                this.zoom_by(1, mouse_pos);
            }
        },

        /**
        *   create zoom buttons info box
        **/
        createui: function () {
            var me = this;
            //$("<div>", { 'class': "iviewer_zoom_in iviewer_common iviewer_button" }).bind('mousedown touchstart', function () { me.zoom_by(1); return false; }).appendTo(this.container);
            //$("<div>", { 'class': "iviewer_zoom_out iviewer_common iviewer_button" }).bind('mousedown touchstart', function () { me.zoom_by(-1); return false; }).appendTo(this.container);
            //$("<div>", { 'class': "iviewer_zoom_zero iviewer_common iviewer_button" }).bind('mousedown touchstart', function () { me.set_zoom(100); return false; }).appendTo(this.container);
            //$("<div>", { 'class': "iviewer_zoom_fit iviewer_common iviewer_button" }).bind('mousedown touchstart', function () { me.fit(this); return false; }).appendTo(this.container);
            //this.zoom_object = $("<div>").addClass("iviewer_zoom_status iviewer_common").appendTo(this.container);
            //$("<div>", { 'class': "iviewer_rotate_left iviewer_common iviewer_button" }).bind('mousedown touchstart', function () { me.angle(-90); return false; }).appendTo(this.container);
            //$("<div>", { 'class': "iviewer_rotate_right iviewer_common iviewer_button" }).bind('mousedown touchstart', function () { me.angle(90); return false; }).appendTo(this.container);

            var toolObj = $(this.container).append("<div id=\"dImgTools\"></div>");
            var href = location.href.toLowerCase();

            var hNum = 260;
            if (href.indexOf("/ImgGetFrame1.aspx".toLowerCase()) != -1 || href.indexOf("/ImgGetFrame1_2.aspx".toLowerCase()) != -1 || href.indexOf("/ImgGetFrame1_3.aspx".toLowerCase()) != -1 || href.indexOf("/ImgGetFrame2.aspx".toLowerCase()) != -1 || href.indexOf("/ImgNameEditTC.aspx".toLowerCase()) != -1) {  
                hNum = 305;
            }
            else if (href.indexOf("/See.aspx".toLowerCase()) != -1) {
                hNum = 215;
            }
            else if (href.indexOf("/VolumeDir.aspx".toLowerCase()) != -1) {
                hNum = 50;
            }
            var htmlStr = "<div class=\"bg-primary\" style=\"opacity: 0.3;position: absolute;width:120px;height:" + hNum + "px;z-index:990;\"></div>";
            htmlStr += "<div style=\"position: absolute;width:120px;height:" + hNum + "px;z-index:991;\">";
            htmlStr += "<div class=\"dBr\">";
            htmlStr += "<a id=\"iviewer_zoom_in\" class=\"iviewer_zoom_in btn btn-primary\" title=\"&#25918;&#22823;\"><i class=\"icon icon-zoom-in\"></i></a>";
            htmlStr += "&emsp;";
            htmlStr += "<a id=\"iviewer_zoom_out\" class=\"iviewer_zoom_out btn btn-primary\" title=\"&#32553;&#23567;\"><i class=\"icon icon-zoom-out\"></i></a>";
            htmlStr += "</div>";

            htmlStr += "<div id=\"dRot\" class=\"dBr\">";
            htmlStr += "<a id=\"iviewer_rotate_left\" class=\"iviewer_zoom_in btn btn-primary\" title=\"&#24038;&#36716;\" onclick=\"RotLeft()\"><i class=\"fa fa-rotate-left\"></i></a>";
            htmlStr += "&emsp;";
            htmlStr += "<a id=\"iviewer_rotate_right\" class=\"iviewer_zoom_out btn btn-primary\" title=\"&#21491;&#36716;\" onclick=\"RotRight()\"><i class=\"fa fa-rotate-right\"></i></a>";
            htmlStr += "</div>";

            htmlStr += "<div class=\"dBr\">";
            htmlStr += "<a id=\"iviewer_zoom_zero\" class=\"iviewer_zoom_zero btn btn-primary\" title=\"1:1\"><i class=\"icon icon-carousel\"></i></a>";
            htmlStr += "&emsp;";
            htmlStr += "<a id=\"iviewer_zoom_fit\" class=\"iviewer_zoom_fit btn btn-primary\" title=\"&#36866;&#24212;&#23631;&#24149;\"><i class=\"icon icon-resize\"></i></a>";
            htmlStr += "</div>";
            htmlStr += "<div class=\"dBr\">";
            htmlStr += "<a id=\"iviewer_zoom_status\" class=\"iviewer_zoom_status btn btn-primary\"></a>";
            htmlStr += "</div>";

            if (((href.indexOf("/ImgGetFrame1.aspx".toLowerCase()) != -1 || href.indexOf("/ImgGetFrame1_2.aspx".toLowerCase()) != -1 || href.indexOf("/ImgGetFrame1_3.aspx".toLowerCase()) != -1)) && (href.indexOf("scan9/ImgGetFrame1_3.aspx".toLowerCase()) == -1)) {
                htmlStr += "<div class=\"dBr\">";
                htmlStr += "<a id=\"btnDel\" class=\"btn btn-primary\" onclick=\"DelImg();\"><i class=\"icon icon-trash\"></i>&nbsp;&#21024;&#38500;&#22270;&#29255;</a>";
                htmlStr += "</div>";
            }

            if (href.indexOf("scan9/ImgGetFrame1_3.aspx".toLowerCase()) != -1) {//个人诉讼档案删除图片
                htmlStr += "<div class=\"dBr\">";
                htmlStr += "<a id=\"btnDel\" class=\"btn btn-primary\" onclick=\"DelImg3();\"><i class=\"icon icon-trash\"></i>&nbsp;&#21024;&#38500;&#22270;&#29255;</a>";
                htmlStr += "</div>";
            }

            if (href.indexOf("/ImgGetFrame2.aspx".toLowerCase()) != -1) {
                htmlStr += "<div class=\"dBr\">";
                htmlStr += "<a id=\"btnDel\" class=\"btn btn-primary\" onclick=\"DelImg2();\"><i class=\"icon icon-trash\"></i>&nbsp;&#21024;&#38500;&#34917;&#25195;</a>";
                htmlStr += "</div>";
            }

            htmlStr += "<div class=\"dBr\">";
            htmlStr += "<a id=\"btnPrintImg\" class=\"btn btn-primary\" onclick=\"PrintSetting();\"><i class=\"icon icon-print\"></i>&nbsp;&#25171;&#21360;&#23548;&#20986;</a>";
            htmlStr += "</div>";

            if (href.indexOf("/See.aspx".toLowerCase()) == -1) {
                htmlStr += "<div class=\"dBr\">";
                htmlStr += "<a id=\"btnImgInfo\" class=\"btn btn-primary\" onclick=\"ShowImgInfo();\"><i class=\"icon icon-file-image\"></i>&nbsp;&#22270;&#20687;&#20449;&#24687;</a>";
                htmlStr += "</div>";
            }

            htmlStr += "</div>";


            $("#dImgTools").html(htmlStr);
            if (href.indexOf("/VolumeDir.aspx".toLowerCase()) != -1) {
                $(".dBr").hide();
                $("#dRot").show();
                //$("#dImgTools").hide();
            }


            $("#iviewer_zoom_in").mousedown(function () { me.zoom_by(1); return false; });
            $("#iviewer_zoom_out").mousedown(function () { me.zoom_by(-1); return false; });
            $("#iviewer_zoom_zero").mousedown(function () { me.set_zoom(100); return false; });
            $("#iviewer_zoom_fit").mousedown(function () { me.fit(this); return false; });
            this.zoom_object = $("#iviewer_zoom_status");


            this.update_status(); //initial status update
        }
    });

    /**
     * @class $.ui.iviewer.ImageObject Class represents image and provides public api without
     *     extending image prototype.
     * @constructor
     * @param {boolean} do_anim Do we want to animate image on dimension changes?
     */
    $.ui.iviewer.ImageObject = function (do_anim) {
        this._img = $("<img>")
                //this is needed, because chromium sets them auto otherwise
                .css({ position: "absolute", top: "0px", left: "0px" });

        this._loaded = false;
        this._swapDimensions = false;
        this._do_anim = do_anim || false;
        this.x(0, true);
        this.y(0, true);
        this.angle(0);
    };


    /** @lends $.ui.iviewer.ImageObject.prototype */
    (function () {
        /**
         * Restore initial object state.
         *
         * @param {number} w Image width.
         * @param {number} h Image height.
         */
        this._reset = function (w, h) {
            this._angle = 0;
            this._swapDimensions = false;
            this.x(0);
            this.y(0);

            this.orig_width(w);
            this.orig_height(h);
            this.display_width(w);
            this.display_height(h);
        };

        /**
         * Check if image is loaded.
         *
         * @return {boolean}
         */
        this.loaded = function () { return this._loaded; };

        /**
         * Load image.
         *
         * @param {string} src Image url.
         * @param {Function=} loaded Function will be called on image load.
         */
        this.load = function (src, loaded, error) {
            var self = this;
            loaded = loaded || jQuery.noop;
            this._loaded = false;

            // #67: don't use image object for loading in case naturalWidth is supported
            // because later assigning to self._img[0] may result in additional image requesrts.
            var supportsNaturalWidth = 'naturalWidth' in new Image();
            var img = supportsNaturalWidth ? self._img[0] : new Image();

            img.onload = function () {
                self._loaded = true;
                if (supportsNaturalWidth) {
                    self._reset(this.naturalWidth, this.naturalHeight);
                } else {
                    self._reset(this.width, this.height);
                }

                self._img
                    .removeAttr("width")
                    .removeAttr("height")
                    .removeAttr("style")
                    //max-width is reset, because plugin breaks in the twitter bootstrap otherwise
                    .css({ position: "absolute", top: "0px", left: "0px", maxWidth: "none" });

                if (!supportsNaturalWidth) {
                    self._img[0].src = src;
                }

                loaded();
            };
            img.onerror = error;

            //we need this because sometimes internet explorer 8 fires onload event
            //right after assignment (synchronously)
            setTimeout(function () {
                if (src != "" && src != undefined) {
                     img.src = src;
                }
            }, 0);
            this.angle(0);
        };
        this._dimension = function (prefix, name) {
            var horiz = '_' + prefix + '_' + name,
                vert = '_' + prefix + '_' + (name === 'height' ? 'width' : 'height');
            return setter(function (val) {
                this[this._swapDimensions ? horiz : vert] = val;
            },
                function () {
                    return this[this._swapDimensions ? horiz : vert];
                });
        };

        /**
         * Getters and setter for common image dimensions.
         *    display_ means real image tag dimensions
         *    orig_ means physical image dimensions.
         *  Note, that dimensions are swapped if image is rotated. It necessary,
         *  because as little as possible code should know about rotation.
         */
        this.display_width = this._dimension('display', 'width'),
        this.display_height = this._dimension('display', 'height'),
        this.display_diff = function () { return Math.floor(this.display_width() - this.display_height()); };
        this.orig_width = this._dimension('orig', 'width'),
        this.orig_height = this._dimension('orig', 'height'),

        /**
         * Setter for  X coordinate. If image is rotated we need to additionaly shift an
         *     image to map image coordinate to the visual position.
         *
         * @param {number} val Coordinate value.
         * @param {boolean} skipCss If true, we only set the value and do not touch the dom.
         */
        this.x = setter(function (val, skipCss) {
            this._x = val;
            if (!skipCss) {
                this._finishAnimation();
                this._img.css("left", this._x + (this._swapDimensions ? this.display_diff() / 2 : 0) + "px");
            }
        },
            function () {
                return this._x;
            });

        /**
         * Setter for  Y coordinate. If image is rotated we need to additionaly shift an
         *     image to map image coordinate to the visual position.
         *
         * @param {number} val Coordinate value.
         * @param {boolean} skipCss If true, we only set the value and do not touch the dom.
         */
        this.y = setter(function (val, skipCss) {
            this._y = val;
            if (!skipCss) {
                this._finishAnimation();
                this._img.css("top", this._y - (this._swapDimensions ? this.display_diff() / 2 : 0) + "px");
            }
        },
           function () {
               return this._y;
           });

        /**
         * Perform image rotation.
         *
         * @param {number} deg Absolute image angle. The method will work with values 0, 90, 180, 270 degrees.
         */
        this.angle = setter(function (deg) {
            var prevSwap = this._swapDimensions;

            this._angle = deg;
            this._swapDimensions = deg % 180 !== 0;

            if (prevSwap !== this._swapDimensions) {
                var verticalMod = this._swapDimensions ? -1 : 1;
                this.x(this.x() - verticalMod * this.display_diff() / 2, true);
                this.y(this.y() + verticalMod * this.display_diff() / 2, true);
            };

            var cssVal = 'rotate(' + deg + 'deg)',
                img = this._img;

            jQuery.each(['', '-webkit-', '-moz-', '-o-', '-ms-'], function (i, prefix) {
                img.css(prefix + 'transform', cssVal);
            });

            if (useIeTransforms) {
                jQuery.each(['-ms-', ''], function (i, prefix) {
                    img.css(prefix + 'filter', ieTransforms[deg].filter);
                });

                img.css({
                    marginLeft: ieTransforms[deg].marginLeft * this.display_diff() / 2,
                    marginTop: ieTransforms[deg].marginTop * this.display_diff() / 2
                });
            }
        },
           function () { return this._angle; });

        /**
         * Map point in the container coordinates to the point in image coordinates.
         *     You will get coordinates of point on image with respect to rotation,
         *     but will be set as if image was not rotated.
         *     So, if image was rotated 90 degrees, it's (0,0) point will be on the
         *     top right corner.
         *
         * @param {{x: number, y: number}} point Point in container coordinates.
         * @return  {{x: number, y: number}}
         */
        this.toOriginalCoords = function (point) {
            switch (this.angle()) {
                case 0: return { x: point.x, y: point.y };
                case 90: return { x: point.y, y: this.display_width() - point.x };
                case 180: return { x: this.display_width() - point.x, y: this.display_height() - point.y };
                case 270: return { x: this.display_height() - point.y, y: point.x };
            }
        };

        /**
         * Map point in the image coordinates to the point in container coordinates.
         *     You will get coordinates of point on container with respect to rotation.
         *     Note, if image was rotated 90 degrees, it's (0,0) point will be on the
         *     top right corner.
         *
         * @param {{x: number, y: number}} point Point in container coordinates.
         * @return  {{x: number, y: number}}
         */
        this.toRealCoords = function (point) {
            switch (this.angle()) {
                case 0: return { x: this.x() + point.x, y: this.y() + point.y };
                case 90: return { x: this.x() + this.display_width() - point.y, y: this.y() + point.x };
                case 180: return { x: this.x() + this.display_width() - point.x, y: this.y() + this.display_height() - point.y };
                case 270: return { x: this.x() + point.y, y: this.y() + this.display_height() - point.x };
            }
        };

        /**
         * @return {jQuery} Return image node. this is needed to add event handlers.
         */
        this.object = setter(jQuery.noop,
                               function () { return this._img; });

        /**
         * Change image properties.
         *
         * @param {number} disp_w Display width;
         * @param {number} disp_h Display height;
         * @param {number} x
         * @param {number} y
         * @param {boolean} skip_animation If true, the animation will be skiped despite the
         *     value set in constructor.
         * @param {Function=} complete Call back will be fired when zoom will be complete.
         */
        this.setImageProps = function (disp_w, disp_h, x, y, skip_animation, complete) {
            complete = complete || jQuery.noop;

            this.display_width(disp_w);
            this.display_height(disp_h);
            this.x(x, true);
            this.y(y, true);

            var w = this._swapDimensions ? disp_h : disp_w;
            var h = this._swapDimensions ? disp_w : disp_h;

            var params = {
                width: w,
                height: h,
                top: y - (this._swapDimensions ? this.display_diff() / 2 : 0) + "px",
                left: x + (this._swapDimensions ? this.display_diff() / 2 : 0) + "px"
            };

            if (useIeTransforms) {
                jQuery.extend(params, {
                    marginLeft: ieTransforms[this.angle()].marginLeft * this.display_diff() / 2,
                    marginTop: ieTransforms[this.angle()].marginTop * this.display_diff() / 2
                });
            }

            var swapDims = this._swapDimensions,
                img = this._img;

            //here we come: another IE oddness. If image is rotated 90 degrees with a filter, than
            //width and height getters return real width and height of rotated image. The bad news
            //is that to set height you need to set a width and vice versa. Fuck IE.
            //So, in this case we have to animate width and height manually.
            if (useIeTransforms && swapDims) {
                var ieh = this._img.width(),
                    iew = this._img.height(),
                    iedh = params.height - ieh;
                iedw = params.width - iew;

                delete params.width;
                delete params.height;
            }
            if (this._do_anim && !skip_animation) {
                this._img.stop(true)
                    .animate(params, {
                        duration: 200,
                        complete: complete,
                        step: function (now, fx) {
                            if (useIeTransforms && swapDims && (fx.prop === 'top')) {
                                var percent = (now - fx.start) / (fx.end - fx.start);

                                img.height(ieh + iedh * percent);
                                img.width(iew + iedw * percent);
                                img.css('top', now);
                            }
                        }
                    });
            } else {
                this._img.css(params);
                setTimeout(complete, 0); //both if branches should behave equally.
            }
        };
        //if we set image coordinates we need to be sure that no animation is active atm
        this._finishAnimation = function () {
            this._img.stop(true, true);
        };
    }).apply($.ui.iviewer.ImageObject.prototype);
    var util = {
        scaleValue: function (value, toZoom) {
            return value * toZoom / 100;
        },
        descaleValue: function (value, fromZoom) {
            return value * 100 / fromZoom;
        }
    };
})(jQuery, undefined);





//左转
var RotNum = 0;
function RotLeft() {
    RotNum -= 90;
    $("#viewer img").css({ "transform": "rotate(" + RotNum + "deg)" });
    if (RotNum <= -360) {
        RotNum=0
    }
}

//右转
function RotRight() {
    RotNum += 90;
    $("#viewer img").css({ "transform": "rotate(" + RotNum + "deg)" });
    if (RotNum >= 360) {
        RotNum = 0
    }
}